<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-08-17 13:07:26
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-08-17 14:26:25
 * @FilePath: \app\src\views\el\css\input\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="form_box">
    <div class="body">
      <div class="inputs">
        <MyInput v-model="form.acc" label="用户名"></MyInput>
        <MyInput v-model="form.pwd" label="密码"></MyInput>
      </div>
      <div class="btns">
        <MyButton class="btn" @click="sub" :loading="loading">提 交</MyButton>
        <MyButton class="btn">取 消</MyButton>
      </div>
    </div>
  </div>
</template>

<script>
import MyInput from "@/components/MyInput";
import MyButton from "@/components/MyButton";
export default {
  components: { MyInput, MyButton },
  data() {
    return {
      form: {
        acc: "",
        pwd: "",
      },
      loading: false,
    };
  },
  methods: {
    sub() {
      this.loading = true;
      setTimeout(() => {
        console.log(this.form);
        this.loading = false;
      }, 1000 * 2);
    },
  },
};
</script>

<style lang="less" scoped>
.form_box .body {
  padding: 0 20px;
  width: 400px;
  .inputs {
    margin-bottom: 20px;
  }
  .btns {
    display: flex;
    .btn {
      flex: 1;
      &:not(:first-child) {
        margin-left: 24px;
      }
    }
  }
}
</style>